<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn1></cpn1>
  <cpn2></cpn2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  // 语法糖写全局组件
  Vue.component("cpn1", {
    template: `<div>
                 <h2>我是标题</h2>
                 <p>我是内容,哈哈哈哈哈</p>
                 <p>我是内容,呵呵呵呵呵呵</p>
               </div>`
  });

  // 语法糖写局部组件
  var app = new Vue({
    el: "#app",
    components: {
      "cpn2": {
        template: `<div>
                 <h2>我是标题</h2>
                 <p>我是内容,哈哈哈哈哈</p>
                 <p>我是内容,呵呵呵呵呵呵</p>
               </div>`
      },
    }
  });
</script>
</html>